<template>
  <div class="container">
    <div class="plugins-tips">
      wangEditor：轻量级 web 富文本编辑器，配置方便，使用简单。 访问地址：
      <a href="https://www.wangeditor.com/doc/" target="_blank">wangEditor</a>
    </div>
    <div class="mgb20" ref="editor"></div>
    <el-button type="primary" @click="syncHTML">提交</el-button>
  </div>
</template>

<script setup lang="ts" name="editor">
import WangEditor from "wangeditor";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";

const editor = ref(null);
const content = reactive({
  html: "",
  text: "",
});
let instance: any;
onMounted(() => {
  instance = new WangEditor(editor.value);
  instance.config.uploadImgServer = "https://txo.westts.cn/api/common/upload";
  instance.config.uploadFileName = "file";
  instance.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
  instance.config.uploadImgHooks = {
    // 上传图片之前
    before: function (fileData:any) {
      console.log(fileData);
      var dataV = new FormData(); //重点--使用formdata添加需要一起传的参数
      dataV.append("file", fileData.file);
      // 可阻止图片上传
      return {
        prevent: false,
        msg: "需要提示给用户的错误信息",
      };
    },
    // 图片上传并返回了结果，图片插入已成功
    success: function (xhr:any) {
      console.log("success", xhr);
    },
    // 图片上传并返回了结果，但图片插入时出错了
    fail: function (xhr:any, editor:any, resData:any) {
      console.log("fail", resData);
    },
    // 上传图片出错，一般为 http 请求的错误
    error: function (xhr:any, editor:any, resData:any) {
      console.log("error", xhr, resData);
    },
    // 上传图片超时
    timeout: function (xhr:any) {
      console.log("timeout");
    },
    // 图片上传并返回了结果，想要自己把图片插入到编辑器中
    // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
    customInsert: function (insertImgFn:any, result:any) {
      // result 即服务端返回的接口
      console.log("customInsert", result.data.fullurl);

      // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
      insertImgFn(result.data.fullurl);
    },
  };
  instance.config.zIndex = 1;
  instance.create();
});
onBeforeUnmount(() => {
  instance.destroy();
  instance = null;
});
const syncHTML = () => {
  content.html = instance.txt.html();
  console.log(content.html);
};
</script>

<style></style>
